<template>
<div>
    <div>
        <van-nav-bar title="出国境填写回执单" left-text="返回" left-arrow @click-left="onClickLeft" />
    </div>
    <div class="heightF">
        <van-cell-group>

            <!-- <van-card :num="item" :price="item" desc="描述信息" :title="item" thumb="https://img.yzcdn.cn/vant/ipad.jpeg"> -->
            <van-card>
                <template #tags>
                    <van-cell :value=organizationName>
                        <!-- 使用 title 插槽来自定义标题 -->
                        <template #title :value=recordType>
                            <van-tag type="primary" size="large">{{userName}}</van-tag>

                        </template>

                    </van-cell>
                    <van-cell title="状态" :value=recordStatusContent />
                    <van-card>
                        <template #tags>
                            <van-cell>{{passportType}} </van-cell>
                            <van-cell>证件号码 {{assportNumber}}</van-cell>
                            <van-cell>证件状态 </van-cell>
                        </template>

                    </van-card>
                    <!-- <van-cell title="所属部门" :value=organizationName /> -->
                    <van-cell title="开始时间" v-model=planStartTime />
                    <van-cell title="结束时间" :value=planEndTime />
                    <van-cell title="类型" :value=recordType />
                    <van-cell title="途径地" :value=places />
                    <van-field v-model="reson" rows="2" autosize label="备注信息" input-align="right" type="textarea" :placeholder=reson disabled="true" />

                    <van-field v-model="receiptReport" rows="3" autosize label="在外情况汇报" input-align="right" type="textarea" :placeholder=receiptReport />
                </template>
            </van-card>
            <van-card>
                <template #tags>
                    <van-cell>
                        <van-steps direction="vertical" :active='dataLengh'>
                            <van-step v-for="(item,index) in taskData" :key="index">
                                <h4 style='margin-top: 5px; margin-bottom: 5px;' v-if="item.userName">{{item.userName}}</h4>
                                <h4 style='margin-top: 5px; margin-bottom: 5px;' v-if="item.taskName">{{item.taskName}}</h4>
                                <h4 style='margin-top: 5px; margin-bottom: 5px;' v-if="item.createTime">{{getLocalTime(item.createTime)}}</h4>
                                <h4 style='margin-top: 5px; margin-bottom: 5px;' v-if="item.auditResult">{{item.auditResult == 0 ? '不同意':'同意'}}</h4>

                                <!-- <p>2016-07-12 12:40</p> -->
                            </van-step>
                        </van-steps>
                    </van-cell>

                </template>

            </van-card>
        </van-cell-group>
    </div>
    <div>

        <van-col span="8">
            <van-button type="primary" block @click="write(0)">确认出行</van-button>
        </van-col>
        <van-col span="8">
            <van-button type="warning" block @click="write(1)">已办证出行</van-button>
        </van-col>
        <van-col span="8">
            <van-button type="danger" block @click="write(2)">未办证出行</van-button>
        </van-col>

    </div>
</div>
</template>

<script>
import {
    Step,
    Steps
} from 'vant';
import Cookies from 'js-cookie'
import request from '@/utils/request'
import {
    Dialog
} from "vant";
import {
    cgjfindOne,
    getTaskAuditList,
    approval
} from "@/api/fy";
import {
    Transformation,
} from '@/api/common'

export default {

    data() {
        return {
            recordType: '',
            planStartTime: '',
            planEndTime: '',
            planSumTime: '',
            planStartDetailTime: '',
            planEndDetailTime: '',
            places: '',
            reson: '',
            name: '',
            //状态
            recordStatusContent: '',
            taskData: '',
            dataLengh: '',
            tijiao: false,
            chehui: false,
            shanchu: false,
            bianji: false,
            myself: false,
            recordId: '',
            recordtype: '',
            approval: false,
            assportNumber: "",
            passportType: '',
            receiptReport:""

        };
    },
    created() {
        this.find();
        this.recordId = this.$route.params.recordId,
            this.recordtype = this.$route.params.recordType,
            this.approval = this.$route.params.approval

        this.organizationName = Cookies.get('organizationName')
        this.userName = Cookies.get('userName')

    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        find() {
            const obj = {
                recordId: this.$route.params.recordId,
                recordType: this.$route.params.recordType
            }
            console.log(obj)
            var userId = Cookies.get("userId");
            cgjfindOne(obj).then(res => {
                var shuju = res.data.record;
                this.recordType = this.Judgmenttype(shuju.applyType)
                this.planStartTime = shuju.planStartTime
                this.planEndTime = shuju.planEndTime
                this.planSumTime = shuju.otHours
                this.places = shuju.places
                this.recordStatusContent = shuju.recordStatusContent
                this.reson = shuju.reason
                this.assportNumber = shuju.passportNumber
                this.passportType = shuju.passportType == 0 ? "普通护照" : "往来港澳通行证或签注"
                //如果是自己登陆则请假详情会有草稿提交以及相应功能 如果是上级登陆则没有相应按钮，只能查看详情信息
                if (userId == shuju.userId) {
                    this.myself = true
                }
                //根据请假状态判断是提交还是撤回
                if (shuju.status == "11" || shuju.status == "3" || shuju.status == "1") {
                    this.tijiao = true
                    this.shanchu = true
                    this.bianji = true
                } else if (shuju.status == "2") {
                    this.chehui = true
                }
            })
            var id = {
                recordId: this.$route.params.recordId
            }
            getTaskAuditList(id).then(res => {
                console.log(res.data, 'task')
                this.taskData = res.data;
                this.dataLengh = res.data.length - 1

                // if (res.data.length == 2) {
                //     this.i = 1
                //     this.i1 = 1
                // } else if (this.dataLengh == 3) {
                //     this.i1 = 2
                //     document.getElementById("three").style.cssText = 'display:block'
                // }
            })
        },
        Judgmenttype(type) {
            if (type == 0) {
                return '出境旅游'
            } else if (type == 1) {
                return '出境探亲'
            } else if (type == 2) {
                return '出国旅游'
            } else if (type == 3) {
                return '出国探亲'
            }
        },
        getLocalTime(time) {
            var date = new Date(time); //获取一个时间对象
            var day = date.getFullYear() + '年' + date.getMonth() + 1 + '月' + date.getDate() + '日' + date.getHours() + '时' + date.getMinutes() + '分'
            return day;
        },
        write(type) {
            var obj = {
                recordId: this.$route.params.recordId,
                receiptType: type,
                isAgree:1 ,
                receiptReport: this.receiptReport
            }

              this.$axios({
                method: 'post',
                url: 'abroadApply/submitReceipt',
                data: this.zhuanfunction(obj)
            }).then((response) => { //这里使用了ES6的语法
                console.log(response) //请求成功返回的数据
                if (response.data.code == '200') {
                    Dialog.alert({
                        title: "成功",
                        message: response.data.msg
                    }).then(() => {
                        this.$router.go(-1);
                    });
                }

            })

        },
        save() {
            var tijiaodata = {
                recordId: this.$route.params.recordId,
                recordType: this.$route.params.recordType,
            }
            this.$axios({
                method: 'post',
                url: 'leaveApply/submitToAudit',
                data: this.zhuanfunction(tijiaodata)
            }).then((response) => { //这里使用了ES6的语法
                console.log(response) //请求成功返回的数据
                if (response.data.code == '200') {
                    Dialog.alert({
                        title: "成功",
                        message: response.data.msg
                    }).then(() => {
                        this.$router.go(-1);
                    });
                }

            })

        },

        ok() {
            var data = {
                recordId: this.$route.params.recordId,
                isAgree: 1,
                remarks: '同意'
            }

            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                url: 'abroadAudit/abroadAudit',
                data: this.zhuanfunction(data)
            }).then((response) => { //这里使用了ES6的语法
                console.log(response) //请求成功返回的数据
                if (response.code == '200') {
                    Dialog.alert({
                        title: "成功",
                        message: res.msg
                    }).then(() => {
                        this.$router.go(-1);
                    });
                } else {
                    Dialog.alert({
                        title: "错误",
                        message: response.data.msg
                    }).then(() => {
                        this.$router.go(-1);
                    });
                }
            })

        },
        ontOk() {
            var data = {
                recordId: this.$route.params.recordId,
                isAgree: 0,
                remarks: '不同意'
            }
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                url: 'abroadAudit/abroadAudit',
                data: this.zhuanfunction(data)
            }).then((response) => { //这里使用了ES6的语法
                console.log(response) //请求成功返回的数据
                if (response.code == '200') {
                    Dialog.alert({
                        title: "成功",
                        message: res.msg
                    }).then(() => {
                        this.$router.go(-1);
                    });
                } else {
                    Dialog.alert({
                        title: "",
                        message: response.data.msg
                    }).then(() => {
                        this.$router.go(-1);
                    });
                }
            })

        },

        zhuanfunction(data) {
            let ret = '';
            for (let it in data) {
                ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&';
            }
            return ret;
        },
        ch() {
            var data = {
                recordId: this.$route.params.recordId,
                recordType: this.$route.params.recordType,
            }
            const that = this;
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                url: 'leaveApply/cancel',
                data: this.zhuanfunction(data)
            }).then((response) => { //这里使用了ES6的语法
                console.log(response) //请求成功返回的数据
                if (response.data.code == '200') {
                    Dialog.alert({
                        title: "成功",
                        message: response.data.msg
                    }).then(() => {
                        this.$router.go(-1);
                    });
                }
            })

        },
        sc() {
            var data = {
                recordId: this.$route.params.recordId,
                recordType: this.$route.params.recordType,
            }
            const that = this;
            this.$axios({
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                method: 'post',
                url: 'leaveApply/delete',
                data: this.zhuanfunction(data)
            }).then((response) => { //这里使用了ES6的语法
                console.log(response) //请求成功返回的数据
                if (response.data.code == '200') {
                    Dialog.alert({
                        title: "成功",
                        message: response.data.msg
                    }).then(() => {
                        this.$router.go(-1);
                    });
                }
            })

        },
        bj(recordId, recordType) {

            this.$router.push({
                name: 'xjjb',
                params: {
                    recordId: recordId,
                    recordType: recordType
                }
            })
        }

    },

}
</script>

<style scoped>
.heightF{
    height: calc(100vh - 90px);
    overflow-y: scroll;
}
</style >
